<template>
    <div class="maskToast">
        <div class="mask"></div>
        <div class="content">此功能正在升级，敬请期待！<span class="closeBtn" @click.stop="closeBtn"></span></div>    
    </div>
</template>
<script>

export default {
  data() {
    return {
    }
  },
  methods: {
      closeBtn(){
          this.$emit('closeMask', false);
      }
  }
}
</script>
<style scoped>
.maskToast {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
}
.maskToast .mask {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.8;
}
.maskToast .content{
    background: url('../../assets/img/upgrade/1.png');
    z-index: 2;
    width: 800px;
    height: 197px;
    line-height: 197px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.maskToast .closeBtn{
    position: absolute;
    top: -17px;
    right: -19px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: url('../../assets/img/upgrade/2.png');
    z-index: 2;
    cursor: pointer;
}
</style>


